<template>
  <div class="container">
    <div class="echart_box">
      <!-- 图表子组件 -->
      <PieSimple1
        :chilData="parentData"
      />
      <!-- 图表子组件 -->
      <PieSimple2
        :chilData="userParentData"
      />
      <div class="text_box">
        <div>
          <h4>当前管理员人数</h4>
          <span>
            {{ parentData.total }}
          </span>
        </div>
        <div>
          <h4>当前注册用户</h4>
          <span>
            {{ userParentData.total }}
          </span>
        </div>
      </div>
    </div>
    <!-- 折线图 -->
    <linestack />
  </div>
</template>

<script>
import PieSimple1 from "@/views/echart/PieSimple1.vue";
import PieSimple2 from "@/views/echart/PieSimple2.vue";
import linestack from "@/views/echart/LineStack.vue";
import request from "@/utils/request";

export default {
  components: {
    PieSimple1,
    PieSimple2,
    linestack
  },
  name: "echart",
  created() {
    this.load();
  },
  methods: {
    load() {
      request.get("/admin/alldata").then(res => {
        if (res.code === '0') {
          res.data.forEach(element => {
            this.parentData.total++;
            if (element.gender == '女') {
              this.parentData.famale++;
            } else {
              this.parentData.male++;
            }
          });
          console.log("admin的总人数", this.parentData.total);
          console.log("男性的总人数", this.parentData.male);
        }
      });
      // user数据获取
      request.get("/user/alldata").then(res => {
        if (res.code === '0') {
          res.data.forEach(element => {
            this.userParentData.total++;
            if (element.gender == '女') {
              this.userParentData.famale++;
            } else {
              this.userParentData.male++;
            }
          });
          console.log("user的总人数", this.userParentData.total);
          console.log("男性的总人数", this.userParentData.male);
        }
      });
    }
  },
  data() {
    return {
      parentData: {
        total: 0,
        male: 0,
        famale: 0,
      },
      userParentData: {
        total: 0,
        male: 0,
        famale: 0,
      },
    };
  }
};
</script>

<style scoped>
.echart_box {
  padding: 40px;
  height: 350px;
  display: flex;
  justify-content: space-between;
}

.text_box {
  padding: 30px 10px;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.text_box span {
  font-size: 30px;
  font-weight: bold;
}
</style>